<!-- 错误页面测试组件 - 用于验证各种错误页面的功能 -->
<template>
    <div class="test-error-pages">
        <h2>错误页面测试</h2>
        <p>点击下面的按钮来测试各种错误页面的功能。</p>

        <!-- 错误页面测试按钮 -->
        <div class="test-buttons">
            <el-button type="primary" @click="test404">
                <el-icon>
                    <Search />
                </el-icon>
                测试404页面
            </el-button>

            <el-button type="warning" @click="test500">
                <el-icon>
                    <Warning />
                </el-icon>
                测试500页面
            </el-button>

            <el-button type="danger" @click="test403">
                <el-icon>
                    <Lock />
                </el-icon>
                测试403页面
            </el-button>

            <el-button @click="testGeneralError">
                <el-icon>
                    <InfoFilled />
                </el-icon>
                测试通用错误页面
            </el-button>
        </div>

        <!-- 通用错误代码输入 -->
        <div class="error-code-input">
            <h3>测试自定义错误代码</h3>
            <el-input v-model="customErrorCode" placeholder="输入错误代码 (如: 400, 401, 408, 502, 503, 504)"
                style="width: 300px; margin-right: 10px;" />
            <el-button @click="testCustomError" :disabled="!customErrorCode">
                测试
            </el-button>
        </div>

        <!-- 说明信息 -->
        <div class="test-info">
            <h3>测试说明</h3>
            <ul>
                <li><strong>404页面</strong>: 测试页面未找到的错误处理</li>
                <li><strong>500页面</strong>: 测试服务器内部错误处理</li>
                <li><strong>403页面</strong>: 测试访问权限不足处理</li>
                <li><strong>通用错误页面</strong>: 测试动态错误代码支持</li>
            </ul>

            <h4>支持的通用错误代码</h4>
            <ul>
                <li><strong>400</strong>: 请求错误</li>
                <li><strong>401</strong>: 未授权访问</li>
                <li><strong>408</strong>: 请求超时</li>
                <li><strong>502</strong>: 网关错误</li>
                <li><strong>503</strong>: 服务不可用</li>
                <li><strong>504</strong>: 网关超时</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

/**
 * 导入Vue 3组合式API
 * @description 用于响应式数据管理
 */
import { ref } from 'vue'

/**
 * 导入Vue Router
 * @description 用于页面导航
 */
import { useRouter } from 'vue-router'

/**
 * 导入Element Plus图标组件
 * @description 用于界面图标显示
 */
import {
    Search,
    Warning,
    Lock,
    InfoFilled
} from '@element-plus/icons-vue'

// ==================== 响应式数据 ====================

/**
 * 自定义错误代码
 * @description 用户输入的错误代码
 */
const customErrorCode = ref<string>('')

// ==================== 获取实例 ====================

/**
 * 获取路由实例
 * @description 用于页面导航操作
 */
const router = useRouter()

// ==================== 测试方法 ====================

/**
 * 测试404错误页面
 * @description 跳转到404错误页面
 */
const test404 = () => {
    router.push('/404')
}

/**
 * 测试500错误页面
 * @description 跳转到500错误页面
 */
const test500 = () => {
    router.push('/500')
}

/**
 * 测试403错误页面
 * @description 跳转到403错误页面
 */
const test403 = () => {
    router.push('/403')
}

/**
 * 测试通用错误页面
 * @description 跳转到通用错误页面，使用默认错误代码
 */
const testGeneralError = () => {
    router.push('/error/400')
}

/**
 * 测试自定义错误代码
 * @description 跳转到通用错误页面，使用用户输入的错误代码
 */
const testCustomError = () => {
    if (customErrorCode.value) {
        router.push(`/error/${customErrorCode.value}`)
    }
}
</script>

<style scoped lang="scss">
.test-error-pages {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;

    h2 {
        color: #1f2937;
        margin-bottom: 1rem;
        text-align: center;
    }

    p {
        color: #6b7280;
        margin-bottom: 2rem;
        text-align: center;
    }

    .test-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 2rem;

        .el-button {
            min-width: 140px;
            height: 44px;

            .el-icon {
                margin-right: 0.5rem;
            }
        }
    }

    .error-code-input {
        text-align: center;
        margin-bottom: 2rem;
        padding: 1.5rem;
        background: #f9fafb;
        border-radius: 8px;
        border: 1px solid #e5e7eb;

        h3 {
            color: #1f2937;
            margin-bottom: 1rem;
            margin-top: 0;
        }

        .el-input {
            margin-bottom: 1rem;
        }
    }

    .test-info {
        background: #f0f9ff;
        border: 1px solid #0ea5e9;
        border-radius: 8px;
        padding: 1.5rem;

        h3 {
            color: #0c4a6e;
            margin-bottom: 1rem;
            margin-top: 0;
        }

        h4 {
            color: #0c4a6e;
            margin-bottom: 0.5rem;
            margin-top: 1.5rem;
        }

        ul {
            color: #0369a1;
            margin-bottom: 0;

            li {
                margin-bottom: 0.25rem;

                strong {
                    color: #0c4a6e;
                }
            }
        }
    }
}

// 响应式设计
@media (max-width: 768px) {
    .test-error-pages {
        padding: 1rem;

        .test-buttons {
            flex-direction: column;
            align-items: center;

            .el-button {
                width: 100%;
                max-width: 200px;
            }
        }

        .error-code-input {
            .el-input {
                width: 100% !important;
                margin-bottom: 1rem;
            }
        }
    }
}
</style>
